<template>
    <div>
        <h1>会员等级列表</h1>
        <table class="table table-bordered" >
            <tbody>
                <tr>
                    <td>会员等级名称</td>
                    <td>会员等级状态</td>
                    
                </tr>
                <tr v-for="item in data.list">
                    <td>{{ item.huiYuanTypeName }}</td>
                    <td>{{ item.huiYuanTypeStare==1?'启用':'禁用' }}</td>
                    <td>
                        
                        <button @click="upstare(item.id)" >修改状态</button>
                        
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
    <div>
   
      <span
        >共<b>{{ data.totalCount }}</b
        >条</span
      >
      <span
        >每页<b>{{ info.pageSize }}</b
        >条</span
      >
      <span
        >共<b>{{ info.pageIndex }}/{{ data.totalPage }}</b
        >页</span
      >
     
      <input type="button" value="首页" @click="goPage(1)" />
      <input type="button" value="上一页" @click="goPage(info.pageIndex - 1)" />
      <span v-for="item in data.totalPage" @click="goPage(item)">{{
        item
      }}</span>
            <span v-for="item in data.totalPage" @click="goPage(item)"></span>
      <input type="button" value="下一页" @click="goPage(info.pageIndex + 1)" />
      <input type="button" value="尾页" @click="goPage(data.totalPage)" />
      <input type="number" v-model="info.pageIndex" />
      <input type="button" value="跳转" @click="goPage(info.pageIndex)" />
   
      <select v-model="info.pageSize" @change="show">
        <option :value="item" v-for="item in arr">每页{{ item }}条</option>
      </select>
    </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue';
import axios from 'axios';
import moment from 'moment';
import { useRouter, useRoute } from 'vue-router';

const router = useRouter();
const route = useRoute();
let info: any = reactive({
    name: '',
    pageIndex: 1, //当前页码
    pageSize: 2, //每页显示条数
    
})
let data: any = reactive({
    list: [],
    totalCount: 0, //总条数
    totalPage: 0, //总页数

})

let arr = [2, 5, 10, 20];
let ids:any = ref([]);
onMounted(() => {
    getlist(); 
})
const goPage = (num: any) => {
    
    if (num < 1) {
       info.pageIndex = 1;
       return;

    }
    if(num>data.totalPage){
        info.pageIndex=data.totalPage;
        return  ; 
    }
    info.pageIndex = num;
    getlist();
    return;
}
const show = () => {
    info.pageIndex = 1;
    getlist();
}
const getlist = () => {
    axios({
        url: '/api/HuiYuan/Showhuiyuantype',
        method: 'get',
        params:info
    }) 
  .then((res)=>{
     data.list = res.data.list;
     data.totalCount = res.data.totalCount;
     data.totalPage = res.data.totalPage;
     console.log(data.list);

   }) 
 .catch((err)=>{
       console.log(err);
   })
}

const upstare=(id:any)=>{
    axios({
        url: '/api/HuiYuan/Uptypetype',
        method: 'get',
        params: { id: id }
    }) 
 .then((res)=>{
    if(res.data=1){
        alert('修改状态成功')

        getlist();
    }
    else{
        alert('修改状态失败')
        return;
       
    }

  })
.catch((err)=>{
      console.log(err);
  }) 

}
</script>

<style scoped>

</style>